

// DOM元素
const userManagementBtn = document.getElementById('userManagementBtn');
const recipeManagementBtn = document.getElementById('recipeManagementBtn');
const userManagement = document.getElementById('userManagement');
const recipeManagement = document.getElementById('recipeManagement');
const userTable = document.getElementById('userTable');
const recipeTable = document.getElementById('recipeTable');
const addUserBtn = document.getElementById('addUserBtn');
const addRecipeBtn = document.getElementById('addRecipeBtn');

// 切换管理部分
userManagementBtn.addEventListener('click', () => {
    userManagement.style.display = 'block';
    recipeManagement.style.display = 'none';
});

recipeManagementBtn.addEventListener('click', () => {
    userManagement.style.display = 'none';
    recipeManagement.style.display = 'block';
});

// 渲染用户表格
function renderUserTable() {
    const tbody = userTable.querySelector('tbody');
    tbody.innerHTML = '';
    users.forEach(user => {
        const row = `
            <tr>
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.password}</td>
                <td><img src="${user.icoUL}" style="height: 100px;width: auto;"/></td>
                <td>
                    <button onclick="editUser(${user.id})">Edit</button>
                    <button onclick="deleteUser(${user.id})">Delete</button>
                </td>
            </tr>
        `;
        tbody.insertAdjacentHTML('beforeend', row);
    });
}

// 渲染recipe表格
function renderRecipeTable() {
    const tbody = recipeTable.querySelector('tbody');
    tbody.innerHTML = '';
    recipes.forEach(recipe => {
        const row = `
            <tr>
                <td>${recipe.id}</td>
                <td>${recipe.title}</td>
                <td>${recipe.category}</td>
                <td><img src="${recipe.image}" style="height: 100px;width: auto;"/></td>
                <td>
                    <button onclick="editRecipe(${recipe.id})">Edit</button>
                    <button onclick="deleteRecipe(${recipe.id})">Delete</button>
                </td>
            </tr>
        `;
        tbody.insertAdjacentHTML('beforeend', row);
    });
}

// 添加用户
addUserBtn.addEventListener('click', () => {
    const username = prompt('Enter username:');
    const email = prompt('Enter email:');
    if (username && email) {
        const newUser = {
            id: users.length + 1,
            username,
            email
        };
        users.push(newUser);
        renderUserTable();
    }
});

// 添加recipe
addRecipeBtn.addEventListener('click', () => {
    const name = prompt('Enter recipe name:');
    const description = prompt('Enter recipe description:');
    if (name && description) {
        const newRecipe = {
            id: recipes.length + 1,
            name,
            description
        };
        recipes.push(newRecipe);
        renderRecipeTable();
    }
});

// 编辑用户
function editUser(id) {
    const user = users.find(u => u.id === id);
    if (user) {
        const newUsername = prompt('Enter new username:', user.username);
        const newEmail = prompt('Enter new email:', user.email);
        if (newUsername && newEmail) {
            user.username = newUsername;
            user.email = newEmail;
            renderUserTable();
        }
    }
}

// 删除用户
function deleteUser(id) {
    if (confirm('Are you sure you want to delete this user?')) {
        users = users.filter(u => u.id !== id);
        renderUserTable();
    }
}

// 编辑recipe
function editRecipe(id) {
    const recipe = recipes.find(r => r.id === id);
    if (recipe) {
        const newName = prompt('Enter new recipe name:', recipe.name);
        const newDescription = prompt('Enter new recipe description:', recipe.description);
        if (newName && newDescription) {
            recipe.name = newName;
            recipe.description = newDescription;
            renderRecipeTable();
        }
    }
}

// 删除recipe
function deleteRecipe(id) {
    if (confirm('Are you sure you want to delete this recipe?')) {
        recipes = recipes.filter(r => r.id !== id);
        renderRecipeTable();
    }
}

// 初始化
renderUserTable();
renderRecipeTable();